
<script type="text/javascript">
    var bookingsById = [];

    $(document).ready(function() {
        
        var currentEditingId = null;
        
        // For editing
        
		$('#editDialog').dialog({
			autoOpen: false,
			height: 510,
			width: 350,
			modal: true,
			buttons: {
				Save: function() {
                    $.post(
                        '<?php echo url_for('bookings/basicUpdate'); ?>',
                        {
                            'id': currentEditingId,
                            'booking[status]': $('#editDialog #status').val(),
                            'booking[amount_paid]': ($('#editDialog #amount_paid').val()).replace('$', ''),
                            'custom[food_datetime_time]': $('#editDialog #food_datetime_time').val(),
                            'booking[room]': $('#editDialog #room').val(),
                            'booking[notes]': $('#editDialog #notes').val()
                        },
                        function() {
                            $(this).dialog('close');
                            window.location.reload();
                        }
                    );
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {}
		});
        
        $('a.editDialog').click(function() {
            var row = $(this).parent('td').parent('tr');
            var id = $('td.id', row).html();
            
            var data = bookingsById[id];
            
            $('#editDialog #amount_paid').val('$' + data.amount_paid);
            $('#editDialog #status').val(data.status);
            $('#editDialog #food_datetime_time').val(data.food_datetime_time);
            $('#editDialog #room').val(data.room);
            $('#editDialog #notes').val($("<div/>").html(data.notes).text());
            
            currentEditingId = id;
            $('#editDialog').dialog('open');
        });
        
        $('#food_datetime_time').timepicker({
            showPeriod: true,
            showLeadingZero: false
        });
        
        // For deleting
        
        $('a.deleteDialog').click(function() {
            var row = $(this).parent('td').parent('tr');
            var id = $('td.id', row).html();
            currentEditingId = id;
            
            $('#deleteDialog').dialog('open');
        });
        
        $("#deleteDialog").dialog({
			autoOpen: false,
			resizable: false,
			height:140,
			modal: true,
			buttons: {
				Delete: function() {
                    window.location = '<?php echo url_for('bookings/delete?id=') ?>' + currentEditingId;
				},
				Cancel: function() {
					$(this).dialog("close");
				}
			}
		});
    });
</script>

<div><a href="<?php echo url_for('bookings/new') ?>">New</a></div>

<?php
    function printBookingList($bookings) {
        $rowCount = 0;
?>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Date & time</th>
              <th>Child name</th>
              <th>Contact name</th>
              <th>Contact phone</th>
              <th>Guest count</th>
              <th>Total cost</th>
              <th>Total paid</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <?php
                foreach ($bookings as $booking) {
                    $rowCount++;
            ?>
            <tr class="<?php echo ($rowCount % 2 == 0 ? "even" : "odd"); ?>">
              <td class="id"><?php echo $booking->getId() ?></td>
              <td><?php echo date('j/n/Y \a\t g:ia', strtotime($booking->getBookingDatetime())) ?></td>
              <td><?php echo $booking->getSubjectName() ?></td>
              <td><?php echo $booking->getContactName() ?></td>
              <td><?php echo $booking->getContactPhone() ?></td>
              <td><?php echo $booking->getGuestCount() ?></td>
              <td>$<?php echo $booking->calculateCost() ?></td>
              <td class="amount_paid">$<?php echo $booking->getAmountPaid() ?></td>
              <td class="status"><?php echo $booking->getStatus() ?></td>
              <td class="actions"><a href="<?php echo url_for('bookings/show?id='.$booking->getId()) ?>">show details</a>
                | <a class="editDialog" href="#">edit basic</a>
                | <a href="<?php echo url_for('bookings/edit?id='.$booking->getId()) ?>">edit details</a>
                | <a class="deleteDialog" href="#">delete</a></td>
            </tr>
            
            <script type="text/javascript">
                // Store all of the booking data that we'll possibly need later (namely for basic edit)
                <?php
                    $bookingsById = array(
                        'status' => $booking->getStatus(),
                        'amount_paid' => $booking->getAmountPaid(),
                        'food_datetime_time' => date('g:i A', strtotime($booking->getFoodDatetime())),
                        'room' => $booking->getRoom(),
                        'notes' => html_entity_decode($booking->getNotes()),
                    );
                    
                    echo 'bookingsById[' . $booking->getId() . '] = ' . json_encode($bookingsById) . ';';
                ?>
            </script>
            <?php
                }
            ?>
          </tbody>
        </table>
<?php
    }
    
    if (isset($submittedBookings) && count($submittedBookings)) {
        echo "<div class='section'>";
        echo "<h2>Submitted bookings</h2>" . PHP_EOL;
        printBookingList($submittedBookings);
        echo "</div>";
    }
    
    if (isset($confirmedBookings) && count($confirmedBookings) > 0) {
        echo "<div class='section'>";
        echo "<h2>Confirmed bookings</h2>" . PHP_EOL;
        printBookingList($confirmedBookings);
        echo "</div>";
    }
    
    if (isset($completedBookings) && count($completedBookings) > 0) {
        echo "<div class='section'>";
        echo "<h2>Completed bookings</h2>" . PHP_EOL;
        printBookingList($completedBookings);
        echo "</div>";
    }
    
    echo "<div class='section'>"; 
    if ($showPast) {
        echo "<a href='?show=future'>Show future bookings</a>";
    }
    else {
        echo "<a href='?show=past'>Show past bookings</a>";
    }
    echo "</div>" . PHP_EOL;
?>

<div class='section'>
    <a href='<?php echo url_for('bookings/today') ?>'>Show today's parties</a>
</div>

<div id="editDialog" title="Edit basic booking details">
	<form>
        <fieldset>
            <label for="amount_paid">Amount paid</label>
            <input type="text" name="amount_paid" id="amount_paid" class="text ui-widget-content ui-corner-all" />
            <label for="status">Status</label>
            <select name="status" id="status" class="ui-widget-content ui-corner-all">
                <option>Submitted</option>
                <option>Confirmed</option>
                <option>Completed</option>
            </select>
            <label for="food_datetime_time">Food time</label>
            <input type="text" name="food_datetime_time" id="food_datetime_time" class="text ui-widget-content ui-corner-all" />
            <label for="room">Room</label>
            <select name="room" id="room" class="ui-widget-content ui-corner-all">
                <?php
                    foreach (config('rooms') as $room) {
                        echo "<option>" . $room . "</option>" . PHP_EOL;
                    }
                ?>
            </select>
            <label for="notes">Notes</label>
            <textarea name="notes" id="notes" class="ui-widget-content ui-corner-all" style="width: 300px; height:100%;"></textarea>
        </fieldset>
	</form>
</div>

<div id="deleteDialog" title="Delete the booking?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This booking will be permanently deleted. Are you sure?</p>
</div>


